﻿@model ProductModel
@using Telerik.Web.Mvc.UI;

@if (Model.Id > 0)
{
	<script>
        $(function () {
            $('#add-product-picture').on('click', function () {
                var pictureId = $("#@Html.FieldIdFor(model => model.AddPictureModel.PictureId)").val();
                var displayOrder = $("#@Html.FieldIdFor(model => model.AddPictureModel.DisplayOrder)").val();

                if (pictureId == 0) {
                	alert(@T("Admin.Catalog.Products.Pictures.UploadFirst").JsText);
                    return;
                }

                $.ajax({
                    cache:false,
                    type: "POST",
                    url: "@(Url.Action("ProductPictureAdd", "Product"))",
                    data: { "pictureId": pictureId, "displayOrder": displayOrder, "productId": @Model.Id },
                    success: function (data) {
                         var productpicturesGrid = $("#productpictures-grid");
                         productpicturesGrid.data('tGrid').ajaxRequest();
						 $('#add-product-picture').attr('disabled', 'disabled');

						 window.displayNotification(data.message, "success");
                    },
                    error:function (xhr, ajaxOptions, thrownError){
                    	alert(@T("Admin.Catalog.Products.Pictures.AddFailed").JsText)
						//$('#add-product-picture').removeAttr('disabled');
                    }
                });
            });
        });
	</script>

    <table class="adminContent mb-5">
		<tr>
			<td colspan="2">
				<div class="admin-config-group">
                    <div class="head">@T("Common.Options")</div>
				</div>
			</td>
		</tr>
		<tr>
			<td class="adminTitle">
				@Html.SmartLabelFor(model => model.HasPreviewPicture)
			</td>
			<td class="adminData">
				@Html.EditorFor(model => model.HasPreviewPicture)
				@Html.ValidationMessageFor(model => model.HasPreviewPicture)
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<div class="admin-config-group">
					<div class="head">@T("Admin.Catalog.Products.Pictures.AddNew")</div>
				</div>
			</td>
		</tr>
		<tr>
			<td class="adminTitle">
				@Html.SmartLabelFor(model => model.AddPictureModel.PictureId)
			</td>
			<td class="adminData">
				@Html.EditorFor(model => model.AddPictureModel.PictureId, new { transientUpload = true })
				@Html.ValidationMessageFor(model => model.AddPictureModel.PictureId)
			</td>
		</tr>
		<tr>
			<td class="adminTitle">
				@Html.SmartLabelFor(model => model.AddPictureModel.DisplayOrder)
			</td>
			<td class="adminData">
				@Html.EditorFor(model => model.AddPictureModel.DisplayOrder)
				@Html.ValidationMessageFor(model => model.AddPictureModel.DisplayOrder)
			</td>
		</tr>
		<tr>
			<td class="adminTitle">
				&nbsp;
			</td>
			<td class="adminData">
				<button type="button" name="add-product-picture" id="add-product-picture" class="btn btn-primary" disabled>
					<i class="fa fa-plus"></i>
					<span>@T("Admin.Catalog.Products.Pictures.AddButton")</span>
				</button>
			</td>
		</tr>
	</table>

    <div>
        @(Html.Telerik().Grid<ProductModel.ProductPictureModel>()
			.Name("productpictures-grid")
			.DataKeys(x =>
			{
				x.Add(y => y.Id).RouteKey("Id");
			})
			.Columns(columns =>
			{
				columns.Bound(x => x.PictureUrl)
					.Width(400)
					.Centered()
					.ClientTemplate("<a href='<#= PictureUrl #>' target='_blank'><img alt='<#= PictureId #>' src='<#= PictureUrl #>' style='max-height: 100px' /><a/>")
					.ReadOnly();
				columns.Bound(x => x.DisplayOrder).Width(100).Centered();
				columns.Command(commands =>
				{
					commands.Edit().Localize(T);
					commands.Delete().Localize(T);
				}).Width(180).HtmlAttributes(new { align = "right" });

			})
			.Editable(x =>
			{
				x.Mode(GridEditMode.InLine);
			})
			.DataBinding(dataBinding =>
			{
				dataBinding.Ajax().Select("ProductPictureList", "Product", new { productId = Model.Id })
					.Update("ProductPictureUpdate", "Product", new { productId = Model.Id })
					.Delete("ProductPictureDelete", "Product", new { productId = Model.Id });
			})
			.EnableCustomBinding(true))
    </div>
}
else
{
    <div class="alert alert-danger">
        @T("Admin.Catalog.Products.Pictures.SaveBeforeEdit")
    </div>
}